<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>
        <div class="body"
            style="width: 70%;float:right;margin-top:150px;margin-right:105px; overflow: auto;font-weight:bold">
            <a class="link" @click="goBack">返回</a>
            <div class="card lg:card-side bg-base-100 shadow-xl"
                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);border:1px solid #000">
                <figure><img :src="goods.pic" alt="Album" style="width: 400px; border-radius:4px" /></figure>
                <div class="card-body">
                    <h2 class="card-title">商品详情</h2>
                    <div class="name">名称: {{ goods.name }}</div>
                    <div class="desc">商品简介: {{ goods.desc }}</div>
                    <!-- 添加价格、名称、单位和库存 -->
                    <div class="price">价格: {{ goods.price }}</div>
                    <div class="unit">单位: {{ goods.unit }}</div>
                    <div class="stock">库存: {{ goods.stock }}</div>
                    <div class="status">状态: {{ goods.status }}</div>
                    <label for="my-status" class="btn">修改状态</label>
                    <!-- Put this part before </body> tag -->
                    <input type="checkbox" id="my-status" class="modal-toggle" />
                    <div class="modal">
                        <div class="modal-box">
                            <h3 class="font-bold text-lg">修改商品状态</h3>
                            <p class="py-4">
                                <select class="select w-full max-w-xs" v-model="selectedStatus">
                                    <option disabled value="">选择修改的状态</option>
                                    <option value="0">待审核</option>
                                    <option value="1">上架</option>
                                    <option value="2">下架</option>
                                </select>
                            </p>
                            <div class="modal-action">
                                <label for="my-status" class="btn">取消</label>
                                <label for="my-status" class="btn" @click="changeGoodsStatus">确定</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import MyHead from "../../components/head.vue"
import MyNav from "../../components/nav.vue"
export default {
    name: "goods_datails",
    data() {
        return {
            head: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
            goods: {},
            selectedStatus: '', // 用于存储选中的状态值
        }
    },
    mounted() {
        this.getGoodsDetails();
    },
    methods: {
        confirm() {
            // 打印选中的状态值到控制台
            console.log(this.selectedStatus);
            this.selectedStatus = ''; // 重置选择框的值
        },
        goBack() {
            this.$router.back();
        },
        //从路由中获取商品ID去获取商品详情
        getGoodsDetails() {
            this.$http.post('/admin/getGoodsDetail', {
                'goodsId': this.$route.params.id
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }).then((res) => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.goods = res.data.data
            }).catch((res) => {
                console.log(res);
            })
        },
        //实现修改商品状态
        changeGoodsStatus() {
            this.$http.post('/admin/changeGoodsStatus', {
                'goodsId': this.$route.params.id,
                'status': parseInt(this.selectedStatus)
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }
            ).then((res) => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
            }).catch((res) => {
                console.log(res);
            })
        }
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
}
</script>

<style scoped>
.app {}
</style>